// 需求1：封装get请求并且写好js doc注释
// 需求2：封装post请求并且写好js doc注释

function post(url, params, callback) {
  // 一、创建xhr对象
  const xhr = new XMLHttpRequest();
  // 二、设置请求方式、请求地址
  //   xhr.open("post", "请求地址");
  xhr.open("post", url);
  // 三、监控请求状态
  xhr.onreadystatechange = () => {
    // 判断返回
    if (xhr.readyState === 4) {
      // 判断状态码
      if (xhr.status === 200) {
        // 获取数据
        let res = JSON.parse(xhr.responseText);
        // 逻辑处理
        // console.log(res);
        callback(res);
      } else {
        // 404 接口地址写错了  500 服务器错误
        console.log(xhr.status);
      }
    }
  };
  // 四、发送请求
  xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
  //   xhr.send(请求参数);
  xhr.send(params);
}

/**
 * 发送get异步请求
 * @param {string} url 请求地址
 * @param {string} params 请求参数 参数名=数据&参数名=数据&参数名=数据&参数名=数据
 * @param {function} callback
 * @param {object} headers 自定义请求头
 */
function get(url, params, callback, headers = {}) {
  // let 形参 = 实参
  // let callback = (res) => {
  //     // 百度搜索：遍历、造li、追加
  // }

  // 一、创建xhr对象
  const xhr = new XMLHttpRequest();
  // 二、设置请求方式、请求地址
  //   xhr.open("get", "请求地址?参数=数据&..&参数名=数据");
  xhr.open("get", `${url}?${params}`);
  // 三、监控请求状态
  xhr.onreadystatechange = () => {
    // 判断服务器返回数据
    if (xhr.readyState === 4) {
      // 判断状态码
      if (xhr.status === 200) {
        // 获取数据
        let res = JSON.parse(xhr.responseText);
        // 逻辑处理
        // 百度搜索：遍历、造li、追加
        // 观看电影：遍历、造div、追加
        // console.log(res);
        callback(res);
      } else {
        console.log(xhr.status);
      }
    }
  };
  // 四、发送请求
  for (let key in headers) {
    // xhr.setRequestHeader(key, headers.键);
    // xhr.setRequestHeader(key, headers.key); 当对象的键是变量时用中括号
    xhr.setRequestHeader(key, headers[key]);
  }
  xhr.send();
}

// 百度搜索;
// get("网址1", "参数名=数据&,...,参数名=数据", (res) => {
//   // 百度搜索：遍历、造li、追加
// });
// 看电影;
// get("网址2", "参数名=数据&....&参数名=数据", (res) => {
//   // 观看电影：遍历、造div、追加
// });
